

import React,{ Component } from 'react';

import { Form, Icon, Input, Button,InputNumber,TreeSelect } from 'antd';
const FormItem = Form.Item;
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

const treeData = [{
  label: 'Node1',
  value: '0-0',
  key: '0-0',
  children: [{
    label: 'Child Node1',
    value: '0-0-0',
    key: '0-0-0',
  }],
}, {
  label: 'Node2',
  value: '0-1',
  key: '0-1',
  children: [{
    label: 'Child Node3',
    value: 'kf_7006_2ebc13cc-af31-488f-b011-d4b86954ba40',
    key: '0-1-0',
  }, {
    label: 'Child Node4',
    value: '0-1-1',
    key: '0-1-1',
  }, {
    label: 'Child Node5',
    value: '0-1-2',
    key: '0-1-2',
  }],
}];
//水平登录栏，常用在顶部导航栏中
class TestTreeSelect7 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: ['0-0-0'],
        }
    }
    /**
     *
     * onSubmitEvent() 提交
     */
    onSubmitEvent(e) {
        e.preventDefault();
        console.log("提交");
        this.props.form.validateFields((err,value)=>{
            if(!err) {
               console.log('得到的值是：',value);
            }else {
                console.log('错误提示：',err);
            }
        });
    }
    onChange = (value) => {
        console.log('onChange ', value, arguments);
        this.setState({ value });
    }
    componentDidMount() {
        this.setState({
            value: ['kf_7006_2ebc13cc-af31-488f-b011-d4b86954ba40']
        })
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const tProps = {
          treeData,
          //value: this.state.value,
          //onChange: this.onChange,
          treeCheckable: true,
          showCheckedStrategy: SHOW_PARENT,
          searchPlaceholder: 'Please select',
          style: {
            width: 300,
          },
        };
        return (
            <Form onSubmit={ this.onSubmitEvent.bind(this)}>
                <div>
                    <FormItem>
                        {
                            getFieldDecorator('email',{
                                initialValue: this.state.value,
                                rules: [{ required: true, message: '邮件客服不能为空!' }],
                            })(
                                <TreeSelect {...tProps} />
                            )
                        }
                        
                    </FormItem>
                </div>
                <FormItem>
                    <Button
                        type="primary"
                        htmlType="submit"
                    >
                        提交
                    </Button>
                </FormItem>
            </Form>
        )
    }
}
export default Form.create()(TestTreeSelect7);

